<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@include file="/WEB-INF/include/taglibs.jsp"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>插件使用示例</title>
<d:script id="jquery,om-ui" />
<d:script path="/static/om-ui/operamasks-ui-plugin.js" />
<d:css id="om-ui" />

<script type="text/javascript">
	$(document).ready(function() {
		initUI({
			"buttonResize":{
				onClick:function(){
					gridDemo.resize({
						height:400,width:600
					});
				}
			},
			"gridDemo":{
				rowDetailsProvider:function(rowData,rowIndex){
	                return '第'+rowIndex+'行，ID='+rowData.col1+'<br/><b>['
                    +rowData.col2+rowData.col3
                    +']</b>的IP地址范围是：<font color="red">'+rowData.col4+'~'+rowData.col5+'</font>';
  			  }

			}
		});
	});
</script>
<style type="text/css">
html,body {
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
}
</style>
</head>
<body>
	<div class="ui-grid" id="gridDemo" title="检索条件" dataSource="grid-demo.json">
		<div class="ui-grid-panel">
			<div class="ui-buttonbar">
				<a class="ui-button" label="设置大小" id="buttonResize"
					left-icon="${ctx }/static/icons/down.png"
					right-icon="${ctx }/static/icons/help.png"></a> <a class="ui-button"
					label="按钮2" left-icon="${ctx }/static/icons/down.png"
					right-icon="${ctx }/static/icons/help.png"></a>
			</div>
			<div>
				<table>
					<tr>
						<td colspan="3">检索条件</td>
					</tr>
					<tr>
						<td width="100px" colspan="1">用户名:</td>
						<td colspan="2"><input type="text"> </td>
					</tr>
					<tr>
						<td width="100px" colspan="1">密码:</td>
						<td width="100px" colspan="1"><input type="password"></td>
						<td width="100px" colspan="1"><button class="ui-button" label="查询"></button></td>
					</tr>
				</table>
			</div>
		</div>
		<div class="ui-grid-colmodel">
			<span header="一级表头">
				<span name="col1" width="300" header="二级表头11"></span>
				<span name="col2" width="260" header="二级表头12"></span>
			</span>
			
			<span header="一级表头2">
				<span header="二级表头21">
					<span name="col3" width="160" align="left" header="三级表头211"></span>
					<span name="col4"  width="160" align="right"  header="三级表头212"></span>
				</span>
				<span name="col5" width="460"  header="二级表头22"></span>
			</span>
		</div>
	</div>
	
	<!-- 测试在同一个页面定义两个grid -->
	<div class="ui-grid" title="同一个页面定义两个grid" dataSource="grid-demo.json">
		<div class="ui-grid-panel">
			<div class="ui-buttonbar">
				<a class="ui-button" label="设置大小2"
					left-icon="${ctx }/static/icons/down.png"
					right-icon="${ctx }/static/icons/help.png"></a> <a class="ui-button"
					label="按钮2" left-icon="${ctx }/static/icons/down.png"
					right-icon="${ctx }/static/icons/help.png"></a>
			</div>
		</div>
		<div class="ui-grid-colmodel">
			<span header="一级表头">
				<span name="col1" width="100" header="二级表头11"></span>
				<span name="col2" width="160" header="二级表头12"></span>
			</span>
			
			<span header="一级表头2">
				<span header="二级表头21">
					<span name="col3" width="100" align="left" header="三级表头211"></span>
					<span name="col4"  width="100" align="right"  header="三级表头212"></span>
				</span>
				<span name="col5" width="160"  header="二级表头22"></span>
			</span>
		</div>
	</div>

</body>
</html>